'use client'

import React from 'react'

import { useUser } from '@clerk/nextjs'

import { getStrategyIconComponent } from './UserAuthStrategyIcon'
import clsxm from '@/lib/helper'

export default function UserAuthFromIcon({ className }: { className: string }) {
  const { user } = useUser()
  const StrategyIcon = React.useMemo(() => {
    const strategy = user?.primaryEmailAddress?.verification.strategy
    if (!strategy) {
      return ''
    }
    return getStrategyIconComponent(strategy)
  }, [user?.primaryEmailAddress?.verification])

  if (!StrategyIcon) {
    return ''
  }

  return (
    <span
      className={clsxm(
        'pointer-events-none flex size-4 select-none items-center justify-center rounded-full border-0 bg-gray-100 dark:bg-gray-100 ',
        className
      )}
    >
      <StrategyIcon className="text-gray-100 size-3 dark:text-black" />
    </span>
  )
}
